“We trust that time is linear. That it proceeds eternally, uniformly, into infinity. But the distinction between past, present, and future is nothing but an illusion. Yesterday, today, and tomorrow are not consecutive, they are connected in a never-ending circle. Everything is connected.”

— The Stranger, Dark (Series)

Too filmy, no? Since we don't do time travel really. But there seem to be some cyclic phenomenons in the universe.

1. The lunar cycle is when all the planets and stars are in the exact same position, as they were 33 years ago.
2. The big spectacles of the ‘70s are back in fashion.
3. The bell-bottoms are picking up among females again.
4. The navigational sidebar of ERPNext is back for 2011.

Oh Wait! Do you remember the ERPNext UI of 2011? If you see it now, you will feel as if you are seeing a whole different product. It drove us on a nostalgic tour, and the surprising reaction from Rushabh was:

“Guys, we were working on sub-contracting in 2011. And we are still refactoring it in 2021? How are we moving forward”?

In terms of new product features added in ERPNext/Frappe, we must have multiplied five times easily. The UI has been polished and reworked four to five times as well. But what ignites this feeling of going in circles? Is it something we are wrong with our approach, or these are just natural cycles? Before we try concluding anything, let’s revisit the older version of ERPNext and see how the Frappe/ERPNext’s UI evolved over the years.

Desk Landing Page

2011

Here is the very first version of ERPNext. The pretty clean top bar and module icons are on the left. The further drill-down on the module allowed accessing specific DocType right from the left navigation bar itself. The flashy colors, but pretty consistently aligned UI components. Not that bad after all!

2014

And then we were in the era where the world had accepted smartphones as a part of their life. From the corporate CEO to the local pan-wala (shopkeeper), was familiar with the app-tray view in their mini-computers in their palms.

The trend drove us to carve the homepage which was pretty similar to app-tray. The user felt familiar with the UI and got quick entry points right there.

To our surprise, the giants from the industry followed the suit and had soon released their version to app-tray like Homepage, still being used by them. But we were restless for perfection, so we moved on.

2018

The app-tray view was appreciated and used by users who were already familiar with ERPNext. But failed to give the starting point to the new users. The users would click on the random icons and land on the, sometimes on the module page, and sometimes on the list view. If someone wanted to set up just the CRM module, the icons on the homepage would guide users on the steps to follow and have their CRM running.

The new dashboard categorized and listed only core modules, and nothing else. If you click on Buying, it will only show you the settings and masters which you need to configure first. Only when they are worked upon, the links for transactions will be activated. We named this idea “knowledge hierarchy”. Explore the system incrementally.

2019

The Dashboard view had set the ground for the version 13 upgrade. We just added the flexibility of customizing your desk and allowed newer components like Chart to be linked on the webpage. Pretty neat and customizable, tweak it as per your business needs.

In the whole journey, though the UI evolved by leaps and bounds, some UI components kept coming and going, as per the reality and trend of that time.

Forms Variations

Similar variations happened with the list view and forms as well. The first version had a consistent UI but lacked the maturity we see today.

The industry had already pivoted from tabs (horizontal) to scroll (vertical) views. You kept scrolling to your Facebook page, and it kept on loading the historical updates for you. The same UI still works for most of the short-clip apps and users have accepted the scrolling as a way of expanding into more details.

We caught this behavior early on and migrated from horizontal tabs to vertical sections. Since the form looked pretty lengthy and overwhelming.

But unlike social media, making data entry in an ERP is not really fun. In the initial days, users who were used to tab view protested a bit for the scrolling issue. Though we held the ground, we kept iterating to ensure scrolling doesn’t take a toll on the user. Firstly, we introduced the option to expand/collapse a section based on the user's preference. If you checked something, it would be saved as a user’s preference and pre-populated on the next visit.

Currently, you can even write a condition to show/hide a section based on values selected in other fields. But notably, hardly anyone protested strongly for the scrolling part. In fact, they extend the form’s length to 150% themselves by adding their custom fields, one of the most liked features in ERPNext.

Within the form, the alignment of the field, font, borders, etc. has been iterated multiple times. What you see today is the highly polished and consistent form view, one of the most prominent ERP of the world has to offer ;)

Thanks to Frappe Framework, many standard components were introduced in the form, making it feature-rich, yet cleaner.

1. The heatmap on top of the form, indicating the user’s engagement on a specific form.
2. Dashboard link, which suggests other documents this current is or could be linked. Also, it gives a quick entry button to create a new entry, attaching the current document as a reference.
3. Sidebar with consistent features like attachment, assignment, sharing tags, and likes. You get all these features bundled on every document, even on the custom doctypes created a minute ago, with no additional effort required.
4. Much cleaner form, with consistent width and background. Column breaks allow you to review more information in a single view.

Over the period, the form view is upgraded up-side-down, but we are still restless. So you can expect a lot more upgrades in the space.

Reports Variations

The first version of the report was that the grid view was actually rendered via a third-party library. Even the first version of the report had a provision to apply your own filters and select columns. However, it had rigidity when it came to column view, report printing possibilities to list a few. Also, the UI itself of the grid view was not at par with the frappe’s UI taste.

It often happens at Frappe that we get restless with the limitation of third party libraries, and reach a point of “let’s make our own library”. This happened with our grid views as well.

It was Faris, Engineer at Frappe who delivered most libraries based on Frappe Framework. The Datatable library developed on Frappe is what is not used in the reports table view, of course. On these lines, a host of libraries were spun out using Frappe Framework like Frappe Charts, Frappe Gantt, Frappe Wiki, and a lot more. Check Products on Frappe.io to learn more.s

Now we are finally talking about the magical ingredient behind ERPNext, the Frappe Framework. If we go by the dark theme, here is how I would describe Frappe Framework.

Frappe Framework is a tool that shrinks delivery timelines for the developer just as the time dilation phenomenon itself would do.

Thanks to all the components you get out-of-the-box in Frappe, your journey from ideation to outcome is shortened by 10x (not scientific) and you get to experience your imaginations lots faster.

While I was trying to give closure to this article, I learned that Tabs is going to be back in the forms. Just one more validation to the cycle of time perhaps. The inevitable cycle. Every end is a new beginning, and the journey just goes on, but with much-improved experience than the last time. That’s what matters the most, isn’t it?